<template>
  <div class="Article">
    <!--    <h1>Article</h1>-->
    <!--    <textarea v-model="article.markdown"></textarea>-->
    <vue-markdown :source="article.markdown" class="content">
      Loading...
    </vue-markdown>
    <!--    <h1>{{ article.markdown }}</h1>-->
  </div>
</template>

<script>
import axios from "axios";
import VueMarkdown from "vue-markdown";

export default {
  name: "Article",
  components: {
    VueMarkdown,
  },
  data() {
    return {
      article: {},
    };
  },
  created() {
    const id = this.$route.params.id;
    axios({
      url: `https://gank.io/api/v2/post/${id}`,
    }).then((res) => {
      this.article = res.data.data;
      console.log(res);
    });
  },
};
</script>

<style lang="stylus">
.content {
  width: 800px;
  margin: 0 auto;
  border: 2px solid #1da2f0;
  padding: 20px;

  img {
    max-width: 100%;
  }
}
</style>
